<template>
  <div v-loading="loading" style="padding: 30px 2%;">
    <el-button type="primary" style="margin-bottom: 10px;" @click="handleCreate(0)">新增</el-button>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="path"
      border
      default-expand-all
      :tree-props="{children: 'children'}"
    >
      <el-table-column
        prop="path"
        label="path"
        align="left"
        min-width="200px"
      />
      <el-table-column
        prop="label"
        label="列表显示名称"
        align="center"
      />
      <el-table-column
        prop="meta.icon"
        label="icon"
        align="center"
      />
      <el-table-column
        prop="meta.affix2"
        label="affix"
        align="center"
      >
        <template slot-scope="{row}">

          <span v-if="row.meta.affix2==0">
            保留
          </span>
          <span v-if="row.meta.affix2==1">
            不保留
          </span>

        </template>

      </el-table-column>
      <el-table-column
        prop="meta.import"
        label="import"
        align="center"
      />
      <el-table-column
        prop="meta.hidden2"
        label="hidden"
        align="center"
      >
        <template slot-scope="{row}">

          <span v-if="row.meta.hidden2==0">
            保留
          </span>
          <span v-if="row.meta.hidden2==1">
            不保留
          </span>

        </template>
        <!-- <span v-if='tableData.meta.hidden==0'>
         展示
     </span>
     <span v-if='tableData.meta.hidden==1'>
        不展示
     </span> -->
      </el-table-column>
      <el-table-column
        prop="meta.is_show"
        label="is_show"
        align="center"
      >
        <template slot-scope="{row}">

          <span v-if="row.meta.is_show==0">
            保留
          </span>
          <span v-if="row.meta.is_show==1">
            不保留
          </span>

        </template>
        <!-- <span v-if='tableData.meta.is_show==0'>
         展示
     </span>
     <span v-if='tableData.meta.is_show==1'>
        不展示
     </span> -->
      </el-table-column>
      <el-table-column
        min-width="300px"
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="primary" style="margin-bottom: 10px;" @click="handleCreate(scope.row.id)">新增</el-button>

          <el-button
            size="mini"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row,scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog :title="textMap[dialogStatus]+'（请对应前端路由设置）'" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :model="temp" label-position="top" label-width="70px" style="width: 400px; margin-left:50px;">

        <el-form-item label="列表名称" prop="title" placeholder="列表显示名称">
          <el-input v-model="temp.label" />
        </el-form-item>

        <el-form-item label="唯一标识" prop="address">
          <el-input v-model="temp.path" placeholder="path" type="text" />
        </el-form-item>

        <el-form-item label="图标" prop="address">
          <el-input v-model="temp.meta.icon" placeholder="icon" type="text" />
        </el-form-item>

        <el-form-item label="是否保留列表框" prop="address">
          <el-select v-model="temp.meta.affix2" style="width: 140px" class="filter-item">
            <el-option
              v-for="item in affix2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

        <!-- <el-input v-model="temp.meta.affix2" placeholder="affix2" min="0" max="1" type="number" /> -->
        </el-form-item>

        <el-form-item label="路径" prop="address">
          <el-input v-model="temp.meta.import" placeholder="import" type="text" />
        </el-form-item>

        <el-form-item label="列表页展示" prop="address">
<!--        <el-input v-model="temp.meta.hidden2" placeholder="import" min="0" max="1" type="number" />
 -->        <el-select v-model="temp.meta.hidden2" style="width: 140px" class="filter-item">
          <el-option
            v-for="item in show"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        </el-form-item>

        <el-form-item label="系统判断展示" prop="address">
<!--        <el-input v-model="temp.meta.is_show" placeholder="import" min="0" max="1" type="number" />
 -->        <el-select v-model="temp.meta.is_show" style="width: 140px" class="filter-item">
           <el-option
             v-for="item in show"
             :key="item.value"
             :label="item.label"
             :value="item.value"
           />
         </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { p_tier } from '@/api/user'
import api from '@/api/tree'
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      textMap: {
        update: '修改',
        create: '添加'
      },
      temp: {
        meta: {}
      },
      dialogFormVisible: false,
      dialogStatus: '',
      up_id: 0,
      affix2: [
        {
          value: 0,
          label: '保留'
        },
        {
          value: 1,
          label: '不保留'
        }
      ],
      show: [
        {
          value: 0,
          label: '展示'
        },
        {
          value: 1,
          label: '不展示'
        }
      ]
    }
  },
  created() {
    this.tree()
  },
  methods: {
    handleDelete(row, index, id) {
      this.$confirm('此操作将永久删除该路由, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.del({
          
          id: id
        }).then(() => {
          // this.list.unshift(this.temp)
          this.tree()
          this.dialogFormVisible = false
          this.$notify({
            title: '提示',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    updateData() {
      this.loading = true
      var than = this
      console.log(this.temp)
      this.dialogFormVisible = false
      api.update({
        
        id: this.up_id,
        temp: this.temp
      }).then(res => {
        this.tree()
        this.dialogFormVisible = false
        // router.addRoutes(res)
      }).catch((res) => {
        console.log('22222')
        than.loading = false
        this.dialogFormVisible = false
      })
    },
    createData() {
      this.loading = true
      var than = this
      console.log(this.temp)
      this.dialogFormVisible = false
      api.save({
        
        temp: this.temp
      }).then(res => {
        this.tree()
        this.dialogFormVisible = false
        // router.addRoutes(res)
      }).catch((res) => {
        console.log('22222')
        than.loading = false
        this.dialogFormVisible = false
      })
    },
    resetTemp(pid = 0) {
      this.temp = {
        path: '',
        title: '',
        meta: {
          icon: '',
          affix2: '',
          pid: '',
          import: '',
          hidden2: '',
          is_show: '',
          pid: pid
        }

      }
    },
    handleCreate(pid) {
      this.resetTemp(pid)
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleUpdate(row) {
      this.up_id = row.id
      this.temp = Object.assign({}, row) // copy obj
      console.log(this.temp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleEdit(index, row) {
      console.log(index, row)
    },

    tree(title) {
      this.loading = true
      var than = this
      p_tier({
        
      }).then(res => {
        than.tableData = res.data
        console.log(than.tableData)
        than.loading = false
        // router.addRoutes(res)
      }).catch((res) => {
        console.log('22222')
        than.loading = false
      })
    }

  }
}
</script>
